<template>
  <el-form
    :model="models"
    :rules="rules"
    ref="qmGenForm"
    label-width="100px"
    class="qm-gen-form"
    :disabled="disabled"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item label="指定部门：" prop="model.departmentId">
          <el-cascader
            v-model="selectedDeptId"
            clearable
            placeholder="请选择"
            :options="deptTree"
            :show-all-levels="false"
            :props="{ value: 'id', label: 'text', checkStrictly: true }"
          ></el-cascader>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="指定用户：" prop="model.users">
          <el-select
            v-model="models.model.users"
            multiple
            placeholder="请选选用户，支持多选"
          >
            <el-option
              v-for="item in controlData.userList"
              :key="item.loginId"
              :label="item.userName"
              :value="item.loginId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="指定账号：" prop="model.accounts">
          <el-input
            type="textarea"
            v-model="models.model.accounts"
            placeholder="用英文,分号分隔"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="消息类型：" prop="model.messageType">
          <el-select
            v-model="models.model.messageType"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in controlData.messageTypes"
              :key="item.typeId"
              :label="item.name"
              :value="item.typeId"
              required
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="应用系统：" prop="model.systemId">
          <el-select
            v-model="models.model.systemId"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in controlData.messageSystem"
              :key="item.systemId"
              :label="item.systemName"
              :value="item.systemId"
              required
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="优先级：" prop="model.priority">
          <el-select
            v-model="models.model.priority"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in controlData.messagePriroty"
              :key="item.value"
              :label="item.key"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="计划发送时间：" prop="model.planTime">
          <el-date-picker
            name="planTime"
            v-model="models.model.planTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="留空表示即时发送"
          ></el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-form-item label="标题：" prop="model.title">
          <el-input v-model="models.model.title"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="内容：" prop="model.body">
          <el-input
            type="textarea"
            :rows="6"
            v-model="models.model.body"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import request from "@/utils/request";
import _ from "lodash";
export default {
  name: "message-sysMessage-create",
  props: {
    models: Object,
    controlData: Object,
    disabled: {
      type: Boolean,
      require: true,
    },
  },
  data() {
    return {
      rules: {
        "model.messageType": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],

        "model.usersName": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],

        "model.title": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.body": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.priority": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.planTime": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.systemId": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.departmentId": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
      },
      selectedDeptId: [],
      deptTree: [],
    };
  },
  watch: {
    selectedDeptId(v) {
      if (_.isArray(v) && v.length > 0) {
        this.models.model.departmentId = v[v.length - 1];
      } else {
        this.models.model.departmentId = v;
      }
      if (this.models.model.departmentId) {
        this.getUsers(this.models.model.departmentId);
      }
    },
  },
  methods: {
    getDeptTreeData() {
      request({
        url: "/admin/sysDepartment/selectDep",
        method: "get",
        params: {},
      }).then((r) => {
        this.deptTree = r || [];
      });
    },
    getUsers(departmentId) {
      request({
        url: "/message/sysMessage/getUsersByDepartmentId",
        method: "post",
        data: { departmentId: departmentId },
      }).then((rlt) => {
        this.controlData.userList = rlt || [];
      });
    },
    // 转换models users，处理选中问题
    conversionModel() {
      const users = this.models.model.users;
      if (typeof users === "string") {
        if (users.indexOf(",") != -1) {
          this.models.model.users = users.split(",");
        } else {
          this.models.model.users = [users];
        }
      }
      const departmentId = this.models.model.departmentId;
      if (typeof departmentId === "string") {
        if (departmentId.indexOf(",") != -1) {
          this.selectedDeptId = departmentId.split(",");
        } else {
          this.selectedDeptId = [departmentId];
        }
      }
    },
  },
  created() {
    this.conversionModel();
    this.getDeptTreeData();
  },
};
</script>

<style scoped>
</style>